<template>
<div class="app-container">
    <!-- <link href="node_modules/mint-ui/lib/header/style.css" rel="stylesheet">手动引入mint-ui样式 -->
	<link href="./src/lib/mui/css/mui.min.css" rel="stylesheet"><!-- 手动引入mui样式 -->
	<link href="./src/lib/mui/css/icons-extra.css" rel="stylesheet"><!--手动引入购物车样式-->
	
   <!--  顶部区域header -->
   <mt-header fixed title="固定在顶部2">
	    <span  slot="left" @click="goBack" v-show="flag">
    <mt-button icon="back">返回</mt-button>
  </span>

   </mt-header>
    <!-- 中间路由区域router-view -->
	
	<transition><!-- 实现动画 -->
	<router-view></router-view>
	</transition>
   <!--  底部区域tabbar -->
   <nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item " to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="/member">
				<span class="mui-icon mui-icon-contact">
					</span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item" to="/shopcar">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart">
					<span class="mui-badge" id="badge">{{this.$store.getters. getAllCount}}</span>
				</span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" to="/search">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</router-link>
		</nav>
   <!--  <h1>这是app组件</h1> -->
</div>
</template>

<script>
export default{
	data(){
		return{
			flag:false
		}
	},
	created(){
		this.flag=this.$router.path==="/home"?false:true;//三元表达式
	},
	methods:{
		goBack(){
			//
			this.$router.go(-1);
		}
		
	},
	watch:{
		"$route.path":function(newVal){
			if(newVal==="/home"){
				this.flag=false
			}else{
				this.flag=true;
			}
		}	}
}
</script>

<style lang="scss" scoped>
.mint-header {
	z-index: 99;
}
.app-container{
    padding-top: 40px;
	 padding-bottom: 50px;

	overflow: hidden;//取消x轴的滚动条
}
.v-enter{
	opacity:0;
	transform: translateX(100%)
}

.v-leave-to{
	opacity:0;
	transform: translateX(-100%);//完全离开
	position: absolute;

}
.v-enter-active,
.v-leave-active{
	transition: all 0.5s ease
};
</style>